<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: white;
        }
        #books{
            height: 90%;
            width: 95%;
            float: left;
            margin-left: 35px;
            margin-top: 35px;
            border-radius: 5px;
            background: #f7f1e3;
        }
        #delbook{
            color: #CCCCCC;
            text-decoration: none;
        }
        #delbook:hover{
            color: black;
            text-decoration: none;
        }
        .bname{
            text-decoration: none;
            color: black;
            font-size: medium;
        }
        .bname:hover{
            text-decoration: none;color: maroon;
        }
        .left{float: left;margin-left:50px;}
        .right{float: right;margin-right:100px;}
    </style>
</head>
<body>
<div th:include="common/inc"></div>
<div id="books">
    <br><br>
    <div class="books" id="bookShelfHead">
        <div class="left">
            <b style="font-size: medium">我的书架</b>
            <a class="bname" href="#" th:onclick="toBookHistory()">历史阅读</a>
        </div>
        <div class="right" id="right">
            <a class="bname" href="#" th:onclick="javaScript:delsBook()">批量删除</a>
        </div>
    </div>
    <input type="hidden" id="userid" th:value="${application.user.uId}">
    <br>
    <hr color="blue">
    <table align="center" width="800px" th:height="300px" th:with="colSize=${2}, rowSize=${pageInfo.list.size()/colSize}, rowSize=${(pageInfo.list.size()%colSize==0 ? rowSize : (rowSize+1))}">
        <tr th:if="${pageInfo.list.size() gt 0}" th:each="rowIdx:${#numbers.sequence(1, rowSize)}">
            <td th:each="colIdx:${#numbers.sequence(1,colSize)}">
                <th:block th:with="idx=${(rowIdx-1)*colSize+colIdx-1}, book=${idx<pageInfo.list.size() ? pageInfo.list[idx] : null}">
                    <table id="bookinfo" th:if="${book!=null}">
                        <tr>
                            <td rowspan="5" width="130px" align="left" valign="top" th:background="'../../upload/'+${book?.fileInfo?.fUrl}" style="background-size: 110px 147px;background-repeat:no-repeat;">
                                <input type="checkbox" name="bookid" th:id="${book?.blId}" th:value="${book?.blId}">
                            </td>
                            <td>
                                <a class="bname" th:href="@{/book/showBookInfo(blId=${book?.blId})}" th:target="_parent" th:text="${book?.blName}"></a>
                            </td>
                        </tr>
                        <tr>
                            <td th:text="${book?.author?.aName}"></td>
                        </tr>
                        <tr>
                            <td rowspan="3" valign="center" height="120px">
                                <input type="button" style="background-color: #f0ad4e; width: 80px;height: 35px;text-align: center;line-height: 20px;border: none;border-radius: 5px;" value="开始阅读" th:onclick="|startReadBook(${book?.blId})|">
                                <a href="#" id="delbook" th:onclick="javascript:toDel([[${book?.blId}]],[[${book?.blName}]])">删除</a>
                            </td>
                        </tr>
                    </table>
                </th:block>
            </td>
        </tr>
    </table>
    <div class="pagep" th:include="common/pageGao"></div>
</div>
</body>
<script>
    function toDel(bid,bname) {
        var userid=$("#userid").val();
        if(confirm("确定删除吗《"+bname+"》？")){
            location.href="/user/toDelBookByShelf?bookid="+bid+"&userid="+userid;
        }
    }
    function delsBook() {
        var userid=$("#userid").val();
        var ids="";
        var books=$("input[name='bookid']:checked");
        for(var i=0;i<books.length;i++){
            ids+=","+books[i].value;
        }
        if(ids!=null && ids!=""){
            if(confirm("确定删除所选书籍？")){
                $.ajax({
                    url:"/user/delsBookShelf",
                    data:{"ids":ids.substring(1),"userid":userid},
                    type:"post",
                    success:function () {
                        location.reload();
                    },error:function () {
                        alert("获取IDS失败");
                    }
                })
            }
        }else {
            alert("请勾选要删除的书");
        }
    }
    function toBookHistory() {
        location.href="toQueryBookHistory";
    }
    function startReadBook(blId){
        parent.location.href="/book/queryChapterById?blId="+blId;
    }
</script>
</html>